import { Component, Input, OnInit } from '@angular/core';

import { HeroCacheService }         from './hero-cache.service';

@Component({
  selector: 'hero-bio',
  template: `
    <h4>{{heroId}} {{hero.name}}</h4>
    <ng-content></ng-content>
    <textarea cols="25" [(ngModel)]="hero.description"></textarea>`,
  providers: [HeroCacheService]
  // 从 HeroContactComponent 获得的英雄电话号码，被投影到上面的 <ng-content> 里
})

export class HeroBioComponent implements OnInit {

  @Input() heroId: number;

  constructor(private heroCache: HeroCacheService) { }

  // ngOnInit 把该 id 传递到服务，然后服务获取和缓存英雄。
  ngOnInit() {
    this.heroCache.fetchCachedHero(this.heroId);
  }

  // hero 属性的 getter 从服务里面获取缓存的英雄，并在模板里显示它绑定到属性值。
  get hero() {
    return this.heroCache.hero;
  }

}

